<template>
	<view class="container">
		<view class="titile">资源</view>
		<view style="margin-left: 2.5%;margin-top: 2%;" @click="openPourp">
			<uv-image :src="listPourp" width="60rpx" height="60rpx"></uv-image>
		</view>
		<uv-popup ref="popupTo" :safeAreaInsetBottom="false" @change="change">
			<view style="width: 100%;margin-top: 2%;overflow-y: auto;height: 830rpx">
				<view style="" v-for="item in typeList">
					<view style="display: flex;">
						<view class="list1" style="max-width: 50vw;margin-left: 3%;" @click="opemResoures(item)">
							{{item.bookType}}
						</view>
						<uv-icon name="arrow-right" style="margin-left: auto;margin-right: 5%;"></uv-icon>
					</view>

					<uv-divider></uv-divider>
				</view>
			</view>

		</uv-popup>
		<view class="segmentedControl">
			<uv-tabs :list="items" keyName="dataType" :current="current" @click="onClickItem"
				style="position: relative;z-index: 1;" :itemStyle="{
				width: '130rpx',
				height: '84rpx'}" :inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)',
							fontSize: '26rpx'
						}" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						fontSize: '30rpx',
						transform: 'scale(1.05)'
			    	}"></uv-tabs>
			<!-- 			<uni-segmented-control class="controller" :current="current" :values="items" @clickItem="onClickItem"
				styleType="text" activeColor="#008BFF"></uni-segmented-control> -->
			<view class="content">
				<view v-show="current === 0">
					<resource @page="page" @keyVlalue="searsh" :item="dataInfo" :customStyle2="customStyle2"
						:isTrue="false"></resource>
				</view>
				<view v-show="current === 1">
					<view class="list_container">
						<resource :item="dataInfo" @keyVlalue="searsh" :isTrue="true" :customStyle2="customStyle2">
						</resource>
					</view>
				</view>
				<view v-show="current === 2">
					<view class="list_container">
						<view class="introduction">
							<view class="search">
								<uv-row gutter="12">

									<uv-col span="10" style="height: 80rpx;">
										<view class="uv-input-wrapper">
											<uv-input v-model="key" class="uv-input-wrapper" :focus="true" placeholder="请输入要查找到的资源"
												:prefixIcon="searshs"
												prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
										</view>

									</uv-col>
									<uv-col span="2">
										<view style="margin-left: 10rpx;text-align: center;margin-bottom: 13rpx;" @click="searsh">搜索
										</view>
									</uv-col>
								</uv-row>
							</view>
							<view class="image-container">
										<view class="image-item" v-for="item2 in dataInfo">
							<!-- 				<view class="resource_title">
												<text class="ellipsis" style="width: 70vw;">{{item2.name}}</text>
												<!					<view class="more">
													<text style="">查看更多</text>
													<image src="../../static/右箭头.png"
														style="width: 32rpx;height: 32rpx;position: relative;top: 2rpx;;"></image>
												</view> -->
							<!-- 				</view> -->
											<view class="resources1" style="margin-top: 8rpx;">
													<uv-image @click="tiao(item2)" :customStyle="customStyle2" :lazy-load="true" radius="0rpx" width="156px" height="120px" :src="item2.cover"
														style="margin-bottom: 14rpx;"></uv-image>
													<view class="text-wrapper" style="font-size: 26rpx;">
														<text style="" class="ellipsisTo">{{item2.resourceName}}</text>
													</view>
													<view class="icon-wrapper" v-if="isTrue">
														<image class="icon" :src="playUrl"></image>
													</view>
											</view>
											<!-- <uv-divider class="divider1"></uv-divider> -->
										</view>
										</view>
						</view>
					</view>
				</view>
				<view v-show="current === 3">
					<view class="list_container">
						<resource :item="dataInfo" @keyVlalue="searsh" :customStyle2="customStyle2" :isTrue="false">
						</resource>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import resource from '../../components/resource/resource.vue'
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import useGetGlobalProperties from '@/util/useGlobal.js'
	const url = useGetGlobalProperties().$httpUrl;
	const httpUrlWx = useGetGlobalProperties().$httpUrlWx;
	const urls = useGetGlobalProperties().$https;
	const book = useGetGlobalProperties().$book;
	const audio = useGetGlobalProperties().$audio;
	const journal = useGetGlobalProperties().$journal;
	const video = useGetGlobalProperties().$vedio;
	const user = uni.getStorageSync('userInfo');
	const dataInfo = ref();
	const searshs = url + '/search.png';
	const listPourp = httpUrlWx + '/list.png';
	const typeData = ref();
	const currents = ref(0)
	const popupTo = ref();
	const typeList = ref();
	const key = ref();
	const customStyle2 = ref({
		boxShadow: '2px 2px 5px rgba(0, 0, 0.2, 0.5)'
	});
	onLoad((option) => {
		// uni.showLoading({
		// 	title:'正在加载中'
		// })

		const dataForm = uni.getStorageSync('dataForm');
		console.log('dataForm', dataForm);
		if (dataForm != '' || dataForm.dataTypeId && dataForm.bookTypeId) {
			current.value = dataForm.current;
			loadInit(dataForm.dataTypeId, dataForm.bookTypeId)
			uni.removeStorage({
				key: 'dataForm',
				success: function(res) {
					console.log('success');
				}
			});
		} else {
			init();
		}
	});
	const tiao = (i) => {
		console.log(i.dataTypeId,book,'+_+_+_+_')
		let urls = '';
		if (i.dataTypeId == book) {
			urls = '/pages/index/bookDetail/bookDetail?id=' + i.resourceId
		} else if (i.dataTypeId == audio) {
			urls = '/pages/index/audioDetails/audioDetails?id=' + i.resourceId
		} else if (i.dataTypeId == journal) {
			urls = '/pages/index/journalDetails/journalDetails?id=' + i.resourceName
			uni.setStorageSync('selectJ', i.resourceId);
		} else {
			urls = '/pages/index/videoDetails/videoDetails?id=' + i.resourceId
		}
		uni.navigateTo({
			url: urls
		})
	}
	const loadInit = (dti, bti) => {
		uni.showLoading({
			title: '正在加载中'
		})
		uni.request({
			url: urls + '/ruralLibrary/bookDataType/list',
			method: 'GET',
			success: (res) => {
				console.log('type', res.data.data);
				items.value = res.data.data;
				uni.request({
					url: urls + '/ruralLibrary/bookType/list/' + dti,
					method: 'GET',
					success: (res) => {
						console.log('type', res.data.data);
						typeData.value = res.data.data[0].id;
						console.log('typeData.value', typeData.value);
						uni.request({
							url: urls + '/wxApi/appInterface/getResources',
							method: 'GET',
							data: {
								current: currents.value,
								id: typeData.value
							},
							success: (res) => {
								console.log('res.data.records', res.data)
								dataInfo.value = res.data.data.records;
								console.log('dataInfo.value', dataInfo.value)

							}
						})
					}
				})

			}
		})

		setTimeout(function() {
			uni.hideLoading();
		}, 2000);
	}
	const searsh = () => {
		uni.navigateTo({
			url: '/pages/searsh/searsh?keys=' + key.value
		})
	}
	const openPourp = () => {
		popupTo.value.open('bottom')
		let typeId = '';
		if (current.value == 0) {
			typeId = book;
		} else if (current.value == 1) {
			typeId = audio;
		} else if (current.value == 2) {
			typeId = video;
		} else {
			typeId = journal;
		}
		uni.request({
			url: urls + '/ruralLibrary/bookType/list/' + typeId,
			method: 'GET',
			success: (res) => {
				console.log('res',res)
				typeList.value = res.data.data;
			}
		})
	}
	onReachBottom(async () => {
		page();
	})
	const flushs = ref(true);
	const page = async () => {
		if (flushs.value == true) {
		uni.showLoading({
			title: '正在加载中'
		})
		console.log('--------',currents.value);
		currents.value++;
		
			uni.request({
				url: urls + '/wxApi/appInterface/getResources',
				method: 'GET',
				data: {
					size: 9,
					current: currents.value,
					id: typeData.value
				},
				success: (res) => {
					console.log('res.data.records', res.data)
					console.log('dataInfo.value', dataInfo.value)
					if (res.data.data.records == []) {
						flushs.value = false;
						return;
					}
					for (let i = 0; i < res.data.data.records.length; i++) {
						dataInfo.value.push(res.data.data.records[i]);
					}
					
					setTimeout(function() {
						uni.hideLoading();
					}, 2000);
				}
			})
		} else {
			uni.showToast({
				title: '已经到底啦',
				duration: 2000,
				icon: 'error'
			});
		}

	}
	const opemResoures = (e) => {
		uni.showLoading({
			title: '正在加载中'
		})
		typeData.value = e.id;
		currents.value = 1;
		uni.request({
			url: urls + '/wxApi/appInterface/getResources',
			method: 'GET',
			data: {
				size: 9,
				current: currents.value,
				id: e.id
			},
			success: (res) => {
				console.log('res.data.records', res.data)
				dataInfo.value = res.data.data.records;
				console.log('dataInfo.value', dataInfo.value)
				uni.hideLoading()
				popupTo.value.close();
			}
		})
	}
	const init = () => {
		uni.showLoading({
			title: '正在加载中'
		})
		uni.request({
			url: urls + '/ruralLibrary/bookDataType/list',
			method: 'GET',
			success: (res) => {
				console.log('type', res.data.data);
				items.value = res.data.data;
				uni.request({
					url: urls + '/ruralLibrary/bookType/list/' + book,
					method: 'GET',
					success: (res) => {
						console.log('type', res.data.data);
						typeData.value = res.data.data[0].id;
						console.log('typeData.value', typeData.value);
						uni.request({
							url: urls + '/wxApi/appInterface/getResources',
							method: 'GET',
							data: {
								current: currents.value,
								id: typeData.value
							},
							success: (res) => {
								console.log('res.data.records', res.data)
								dataInfo.value = res.data.data.records;
								console.log('dataInfo.value', dataInfo.value)
								uni.hideLoading()
							}
						})
					}
				})

			}
		})

	}
	const onClickItem = (e) => {
		console.log("e", e)
		if (current.value !== e.currentIndex) {
			current.value = e.index;
			currents.value = 0;
			uni.showLoading({
				title: '正在加载中'
			})
			// current.value = e.index;
			// uni.hideTabBar();
			// clear.value = false
			// selectAll.value = []
			//typeData.value = e.id;
			let id = '';
			const book = uni.getStorageSync('book')
			const audio = uni.getStorageSync('audio')
			const journal = uni.getStorageSync('journal')
			const vedio = uni.getStorageSync('vedio')
			if (current.value == 0) {
				id = book;
			} else if (current.value == 1) {
				id = audio;
			} else if (current.value == 3) {
				id = journal;
			} else if (current.value == 2) {
				id = vedio;
			}
			let users = uni.getStorageSync('userInfo');
			// uni.request({
			// 	url: urls + '/wxApi/collect/getUserResource/' + users.openId + '/' + id,
			// 	method: 'GET',
			// 	success: (res) => {
			// 		dataInfo.value = res.data.data;
			// 		console.log('dataInfo.value', dataInfo.value)
			// 		uni.hideLoading()
			// 	}
			// })
			currents.value = 1;
			uni.request({
				url: urls + '/ruralLibrary/bookType/list/' + id,
				method: 'GET',
				success: (res) => {

					if (res.data != '' || !res.data) {
						console.log('type', res.data.data);
						typeData.value = res.data.data[0].id;
						console.log('typeData.value', typeData.value);

						uni.request({
							url: urls + '/wxApi/appInterface/getResources',
							method: 'GET',
							data: {
								current: currents.value,
								id: typeData.value
							},
							success: (res) => {
								console.log('res.data.records', res.data)
								dataInfo.value = res.data.data.records;
								console.log('dataInfo.value', dataInfo.value)
								uni.hideLoading()
							}
						})
						return;
					}
					dataInfo.value = []
					uni.hideLoading()
					return;

				}
			})
		}
	};
	onMounted(() => {

	})

	const items = ref([{
		name: '图书',
	}, {
		name: '音频',
	}, {
		name: '视频'
	}, {
		name: '期刊'
	}]);
	const current = ref(0);
	const isTrue = ref(true);
	const getList = [{
			name: '政治法律',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}

			],
		},
		{
			name: '文学传纪',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		},
		{
			name: '自然科普',

			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		},
		{
			name: '农业科技',
			childrens: [{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '西方政治',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'http://t15.baidu.com/it/u=3775132873,2686648564&fm=224&app=112&f=JPEG?w=500&h=500&s=1984FC104875779EAE9334DF0300C0AA',
					name: '雷锋精神',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},
				{
					url: 'http://t15.baidu.com/it/u=3542258734,3132253774&fm=224&app=112&f=JPEG?w=500&h=500',
					name: '用法读本',
					author: '农业部人事劳动司、农业部产业政策与法规司',
					desc: '按照全面推进农业依法行政的总体要求，在反映农业法律法规整体框架的基础上'
				}
			],
		}
	];
	const getList1 = [{
			name: '政治法律',
			childrens: [{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '黄梅戏：小乔初嫁',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					name: '第9集 河南坠子《偷年糕》 演员某某某',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				},

			],
		},
		{
			name: '文学传纪',
			childrens: [{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					name: '黄梅戏：小乔初嫁',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '第9集 河南坠子《偷年糕》 演员某某某',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				}
			],
		},
		{
			name: '自然科普',

			childrens: [{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					name: '水浒传',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '三国演义',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				}
			],
		},
		{
			name: '农业科技',
			childrens: [{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					name: '水浒传',
					author: '谷春德、吕世伦',
					desc: '这是国内第一部西方法律思想史专著和高校教程，其使用率颇高。'
				},
				{
					url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '三国演义',
					author: '《雷锋全集》编写组',
					desc: '雷锋精神读本(高中读本)》以中央最新概括的雷锋精神为指导，把雷锋故事重新编排'
				}
			],
		}
	];
</script>

<style lang="scss" scoped>
	.ellipsisTo {
		text-align: center;
		width: 310rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		margin-top: 5%;
	}
	.resources1 {
		flex: 0 0 calc(33.33%); /* 计算宽度，考虑到右边距 */
		   margin-bottom: 5px;
		   display: flex;
		   flex-direction: column;
		   align-items: flex-start;
		   position: relative;
		   border-radius: 10rpx;
		/* 将资源项左对齐 */
	}
	.image-container {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 5%;
	}
	.image-item {
		margin-left: 3.3%;
		margin-top: 3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		/* 添加相对定位 */
		border-radius: 10rpx;
		text-align: center;
		/* 		margin-bottom: 5px; */
	}
	.list1 {
		max-width: 300rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
	}

	.uv-input-wrapper {

		transition: border-color 0.3s;

		&:focus-within {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 139, 255, 0.25);
			border-color: blue;
			border: 2rpx solid #008BFF;
		}
	}

	.divider1 {}

	.icon-wrapper {
		position: absolute;
		bottom: 80rpx;
		right: 13%;
	}

	.icon {
		width: 42rpx;
		height: 40rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		color: #fff;
	}

	.resources1 {
		flex: 0 0 calc(50%);
		/* 计算宽度，考虑到右边距 */
		margin-bottom: 5px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		border-radius: 10rpx;
		/* 负值修复左右间隙 */

	}

	.resources1_item {
		width: calc(50% - 4rpx);
		/* 一行显示两个，减去左右间隙 */
		position: relative;
		height: 280rpx;
		/* 设置一个固定高度 */
	}

	.uv-image {}


	.text-wrapper {
		width: 330rpx;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		text-overflow: ellipsis !important;
		margin-left: auto;
		margin-right: auto;
		/* 文字左对齐 */
	}

	.more {
		font-size: 24rpx;
		color: #86909C;
		margin-left: 360rpx;
		display: flex;
		align-items: center;
	}

	.resource_title {
		display: flex;
		align-items: center;

	}

	.resources_container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;

		padding: 0 30rpx;
		margin-top: 32rpx;
	}

	.search {
		padding: 0 30rpx;
		margin-top: 4%;
	}

	.divider {
		position: relative;
		bottom: 31rpx;
	}

	.controller {

		height: 84rpx;
		position: relative;
	}

	.segmentedControl {
		margin-top: 28rpx;
	}

	.titile {
		margin-left: 20rpx;
		margin-top: 72rpx;
		font-size: 38rpx;
	}

	.container {
		font-size: 36rpx;
		font-family: my-font;
		padding-bottom: 100rpx;
	}
</style>